<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <canvas id="canvas1" width="800" height="600"></canvas>
</head>
<body>
    <script>
    //1.找到画布对象
    var canvas1 = document.querySelector("#canvas1");
    //2.找到上下文对象(画笔对象)这边是2d引擎的
    var cxt = canvas1.getContext("2d");

    

     function renderClock(){
       cxt.clearRect(0,0,800,600)
       cxt.save()
       //将坐标移动到画布的中央
       cxt.translate(400,300)
       cxt.rotate(-2*Math.PI/4)
       cxt.save()
       //绘制表盘
       cxt.beginPath()
       cxt.arc(0,0,200,0,2*Math.PI)
       cxt.strokeStyle="darkgrey"
       cxt.lineWidth=10
       cxt.stroke()
       cxt.closePath()
   
       //绘制秒针刻度刻度
       for(var j=0;j<60;j++){
        cxt.rotate(Math.PI/30)
        cxt.beginPath()
        cxt.moveTo(180,0)
        cxt.lineTo(190,0)
        cxt.lineWidth=2
        cxt.strokeStyle="darkgrey"
        cxt.stroke()
        cxt.closePath()
       }
       cxt.restore()
       cxt.save()
   
       //绘制时针刻度
       for(var i=0;i<12;i++){
        cxt.rotate(Math.PI/6)
        cxt.beginPath()
        cxt.moveTo(180,0)
        cxt.lineTo(200,0)
        cxt.lineWidth=10
        cxt.strokeStyle="darkgrey"
        cxt.stroke()
        cxt.closePath()
       }
       cxt.restore()
       cxt.save()
       var time=new Date()
       var hour=time.getHours()
       var min=time.getMinutes()
       var sec=time.getSeconds()
       //如果时间大于12就时间减去12
       hour=hour>12?hour-12:hour
       console.log(hour,sec);
       //绘制秒针
       //根据秒针的时间进行旋转
        cxt.rotate(2*Math.PI/60*sec)
        cxt.beginPath()
        cxt.moveTo(-30,0)
        cxt.lineTo(160,0)
        cxt.lineWidth=2
        cxt.strokeStyle="red"
        cxt.stroke()
        cxt.closePath()
        cxt.restore()
        cxt.save()
        //绘制分针
        cxt.rotate(2*Math.PI/60*min+2*Math.PI/3600*sec)
        cxt.beginPath()
        cxt.moveTo(-20,0)
        cxt.lineTo(150,0)
        cxt.lineWidth=4
        cxt.strokeStyle="darkblue"
        cxt.stroke()
        cxt.closePath()
        //绘制时针
        cxt.rotate(2*Math.PI/12*hour+2*Math.PI/60/12*min+2*Math.PI/12/60/60*sec)
        cxt.beginPath()
        cxt.moveTo(-10,0)
        cxt.lineTo(140,0)
        cxt.lineWidth=6
        cxt.strokeStyle="darkslategray"
        cxt.stroke()
        cxt.closePath()
       
        cxt.beginPath()
        cxt.arc(0,0,10,0,2*Math.PI)
        cxt.fillStyle="deepskyblue"
        cxt.fill()
        cxt.closePath()

        cxt.restore()
        cxt.restore()
     }
      setInterval(() => {
        renderClock()
     }, 1000);
     </script>
</body>
</html>